<template>
  <el-dialog :title="title" :visible="dialogVisible" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="100px" label-suffix=":">
      <el-form-item label="资源类型" prop="type">
        <el-radio-group v-model="form.type" @change="changeRadio">
          <el-radio :label="0">图片</el-radio>
          <el-radio :label="1">视频</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="选择资源" prop="url">
        <el-upload
          :action="uploadUrl"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :file-list="fileList"
          list-type="picture-card"
          :class="{ hide: isUpload }"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <div v-if="form.type === 0">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <!-- 放大 -->
                <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span> -->
                <!-- 删除 -->
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div v-if="form.type === 1">
              <video class="el-upload-list__item-thumbnail" :src="file.url"></video>
              <span class="el-upload-list__item-actions">
                <!-- 放大 -->
                <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span> -->
                <!-- 删除 -->
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibleImage">
          <img width="100%" :src="dialogImageUrl" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="分组名称" prop="class">
        <el-input v-model="form.class" placeholder="请输入图片组名或者视频名称"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">返回</el-button>
      <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { baseURL } from '@/config/baseURL'
import { resourceAddApi } from '@/api/modules/resource'
export default {
  props: {
    isShow: Boolean
  },
  data() {
    return {
      title: '添加资源',
      dialogVisible: false,
      form: {
        type: 0,
        urlList: [],
        url: '',
        class: ''
      },
      rules: {
        class: [{ required: true, message: '请输入图片组名或者视频名称', trigger: 'blur' }],
        url: [{ required: true, message: '请上传图片或者视频', trigger: 'blur' }]
      },
      dialogImageUrl: '',
      dialogVisibleImage: false,
      disabled: false,
      fileList: [],
      isUpload: false
    }
  },
  watch: {
    isShow(val) {
      this.dialogVisible = val
      if (val) this.isUpload = false
    }
  },
  created() {
    this.uploadUrl = baseURL + '/upload'
  },
  methods: {
    changeRadio(data) {
      this.fileList = []
      this.changeUrl()
    },
    changeUrl() {
      let fileArr = []
      this.fileList.forEach(item => {
        const url = item.response.data.url
        fileArr.push(url)
      })
      console.log(this.fileList)
      this.form.url = fileArr.join(',')
      if (this.form.type === 1) {
        if (this.fileList.length) this.isUpload = true
        else this.isUpload = false
      }
    },
    handleRemove(file) {
      this.fileList.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.fileList.splice(index, 1)
        }
      })
      this.changeUrl()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisibleImage = true
    },
    handleClose() {
      this.resetForm('form')
      this.$emit('close')
    },
    handleSuccess(res, file, fileList) {
      this.fileList = fileList
      this.changeUrl()
    },
    beforeUpload(file) {
      const imgType = ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif']
      const videoType = ['video/mp4', 'video/avi', 'video/wma', 'video/x-ms-wmv', 'video/x-flv']
      let imgRes = imgType.indexOf(file.type)
      let videoRes = videoType.indexOf(file.type)
      if (this.form.type === 0) {
        if (imgRes > -1) return true
        else {
          this.$message.error('请上传图片')
          return false
        }
      }
      if (this.form.type === 1) {
        if (videoRes > -1) {
          this.isUpload = true
          return true
        } else {
          this.$message.error('请上传视频')
          return false
        }
      }
    },
    submit() {
      resourceAddApi({ ...this.form }).then(res => {
        this.resetForm('form')
        this.$emit('close')
        this.$emit('update')
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) this.submit()
      })
    },
    resetForm(formName) {
      this.fileList = []
      this.changeUrl()
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .hide .el-upload--picture-card {
  display: none;
}
</style>
